<nav>
  <div>
    <button class="btn" id="mark-all" title="<%= t('partials.action_bar.mark_all') %>" aria-label="<%= t('partials.action_bar.mark_all') %>">
      <i class="icon-ok"></i>
      <%= render "stories/mark_all_as_read_form", { stories: stories } %>
    </button>
    <a class="btn" href="/" id="refresh" title="<%= t('partials.action_bar.refresh') %>">
      <i class="icon-repeat"></i>
    </a>
  </div>

  <div>
    Logged in as <%= link_to(current_user.username, edit_profile_path) %>
  </div>

  <div>
    <a class="btn btn-primary" id="starred" href="/starred" title="<%= t('partials.action_bar.starred_stories') %>">
      <i class="icon-star"></i>
    </a>
    <a class="btn btn-primary" id="archive" href="/archive" title="<%= t('partials.action_bar.archived_stories') %>">
      <i class="icon-time"></i>
    </a>
    <a class="btn btn-primary" id="feeds" href="/feeds" title="<%= t('partials.action_bar.view_feeds') %>">
      <i class="icon-list"></i>
    </a>
    <a class="btn btn-primary" id="add-feed" href="/feeds/new" title="<%= t('partials.action_bar.add_feed') %>">
      <i class="icon-plus"></i>
    </a>
  </div>
</nav>

<script type="text/javascript">
  $(document).ready(function() {
    $("#mark-all").click(function(e) {
      e.preventDefault();

      $("form#mark-all-as-read").submit();
    });
    
    Mousetrap.bind("r", function() {
      var refresh = $("a#refresh")[0];
      if (refresh) refresh.click();
    });

    Mousetrap.bind("f", function() {
      var all_feeds = $("a#feeds")[0];
      if (all_feeds) all_feeds.click();
    });

    Mousetrap.bind("a", function() {
      var add_feed = $("a#add-feed")[0];
      if (add_feed) add_feed.click();
    });

    Mousetrap.bind("shift+a", function() {
      $("form#mark-all-as-read").submit();
    });
  });
</script>
